import JSONP from '@/interfaces/ajax'
let Jsonp = JSONP.Jsonp
const Goods = {
    namespaced: true,
    state() {  
        return {  
            // ajax返回数据初始值    
            productInfo: [],
            // ajax返回数据初始值
            description: [],
            // 弹窗初始状态 
            popupState: false,
            // 规格列表的值    
            selectedSaleAttr2: null,   
            // 颜色列表的值 
            selectedSaleAttr1: null,
            // 同时点击规格和颜色时的综合库存 
            skuStockNum: null,
            // 颜色和规格的关联
            skuInfo: {}                                 
        }
    },
    actions: {
        async setProductInfo({ commit }, goodsSn, channelCode) {
            let url = config.interface.getProductInfo + '?goods_sn=' + goodsSn
            if (channelCode !== undefined) {
                url += '&channelCode=' + channelCode
            }
            // ret就是服务器返回过来的数据。await是等待它后面的方法执行完成后才会执行下面的代码
            let ret = await Jsonp(url)   
            // commit(方法调用, ret.productInfo是ajax返回的数据)                  
            commit('setProductInfo', ret.productInfo) 
        },
        async setDescription({ commit }, goodsSn, channelCode) {
            let url = config.interface.getProductDesc + '?goods_sn=' + goodsSn
            if (channelCode !== undefined) {
                url += '&channelCode=' + channelCode
            }
            let ret = await Jsonp(url)        
            commit('setDescription', ret) 
        },  
        // 点击图文详情跳转至对应锚点    
        async setJumpProductImage({commit}) {
            commit('setJumpProductImage')           
        },
        // 点击商品信息跳转至对应锚点
        async setJumpProductInfo({commit}) {
            commit('setJumpProductInfo')           
        },
        // 弹窗
        async setPopupState({commit}) {
            commit('setPopupState')           
        },
        // 规格的逻辑   
        async setSelectedSaleAttr2({commit}, data) { 
            // 此处的data为es6写法，是data:data的缩写， type：区分是规格还是颜色点击
            commit('setSelectedSaleAttr', {data, type: 2})         
        },
        // 颜色的逻辑
        async setSelectedSaleAttr1({commit}, data) {
            commit('setSelectedSaleAttr', {data, type: 1})         
        }                                                
    },
    getters: {},
    mutations: {      
        // state:固定写法,productInfo:就是上面的ret.productInfo        
        setProductInfo: function (state, productInfo) { 
            state.productInfo = productInfo
            var data = {}
            // 循环skuInfo
            productInfo.skuInfo && productInfo.skuInfo.length && productInfo.skuInfo.forEach(item => {
                // 把每一项item放到data对象里。把item中颜色和规格code的拼接作为data新添的属性
                data[`${item.saleAttr1ValueCode}_${item.saleAttr2ValueCode}`] = item
            })
            // state.skuInfo的数据结构: 50_602为键名，每个item为键值 
            state.skuInfo = data   
        },
        setDescription: function (state, description) { 
            state.description = description
        },
        // 点击图文详情跳转至对应锚点
        setJumpProductImage(state) {
            var anchor = document.querySelector('#stickNavWrap_item')
            document.body.scrollTop = anchor.offsetTop
            // 兼容
            document.documentElement.scrollTop = anchor.offsetTop
        },
        // 点击商品信息跳转至对应锚点
        setJumpProductInfo(state) {
            var anchor = document.querySelector('#detailTab')
            document.body.scrollTop = anchor.offsetTop
            // 兼容
            document.documentElement.scrollTop = anchor.offsetTop
        }, 
        // 弹窗的逻辑
        setPopupState(state) { 
            state.popupState = !state.popupState
        },
        // 点击规格或者颜色
        setSelectedSaleAttr(state, data) {
            // 判断当前点击的颜色有没有灰色样式，如果有，就return(无点击效果)            
            if (data.data.isDisabled) return false
            // 判断当前点击的颜色是否高亮，如果已经高亮，再次点击将去掉高亮的效果 
            if (data.data === state['selectedSaleAttr' + data.type]) {
                state['selectedSaleAttr' + data.type] = null
            } else {
                // 把goodsSku.vue里点击当前颜色的信息赋值给state.selectedSaleAttr2(实现高亮效果)                
                state['selectedSaleAttr' + data.type] = data.data
            } 
            // 点击当前颜色，获取到skuInfo(共42条数据)里面有相同颜色的集合
            let skuInfos = state.skuInfo 
            // 点击规格获取颜色对象，点击颜色获取规格对象
            var reverseType = data.type === 1 ? 2 : 1
            let saleAttrTypeLists = state.productInfo.saleAttrList['saleAttr' + reverseType + 'List']  
            saleAttrTypeLists.forEach(saleAttrTypeList => {
                let key = data.type === 2 ? `${saleAttrTypeList.saleAttr1ValueCode}_${data.data.saleAttr2ValueCode}` : `${data.data.saleAttr1ValueCode}_${saleAttrTypeList.saleAttr2ValueCode}`
                if (skuInfos[key]) {
                    // state.selectedSaleAttr2，高亮的那个规格。如果规格高亮的话，没库存的颜色会灰显。如果规格没高亮，就没有灰显的类
                    saleAttrTypeList['isDisabled'] = state['selectedSaleAttr' + data.type] ? (skuInfos[key] ? (skuInfos[key].stockNum === 0) : true) : false                         
                }               
            })   
            // 同时点击规格和颜色时的综合库存逻辑
            if (state.selectedSaleAttr2 && state.selectedSaleAttr1) {
                let key = `${state.selectedSaleAttr1.saleAttr1ValueCode}_${state.selectedSaleAttr2.saleAttr2ValueCode}`
                skuInfos[key] && (state.skuStockNum = skuInfos[key].stockNum)
            } else {
                state.skuStockNum = null
            }                           
        }                    
    },
    modules: {
     
    }
}

export default Goods
